{% extends "header.html" %}
{% load  web_tag %}
{% block conten %}

<link rel="stylesheet" href="/static/css/prettify.css" />
<link rel="stylesheet" href="/static/css/multiselect_style.css" />

<link rel="stylesheet" href="/static/plugins/timepicker/bootstrap-timepicker.min.css">
<link rel="stylesheet" href="/static/plugins/iCheck/all.css">
<link rel="stylesheet" href="/static/plugins/daterangepicker/daterangepicker-bs3.css">

<style>
.hr-line-dashed{border-top: 1px dashed #e7eaec;
    color: #ffffff;
    background-color: #ffffff;
    height: 1px;
    margin: 20px 0;} 
</style>

<div class="box box-primary" style="width: 80%;padding:20px;">

<form action="" method="post" id="reject_form">

<div class="left" style="margin-bottom: 15px;width: 80%;margin-left: 25px;margin-top: 25px;">
	<input type="text" class="form-control" required="required" id="name" name="name" value="{{user.name}}" disabled="">
</div>

<div class="hr-line-dashed"></div>

<div style="width: 80%;margin-left: 25px;">

</div>




<div  style="width: 80%;margin-left: 25px;">
<div >
<div class="box-header">
  <h3 class="box-title">组列表</h3>
</div><!-- /.box-header -->
<div class="box-body no-padding">



<div class="row">
	<div class="col-xs-5">
		<select name="from" class="multiselect form-control" size="8" multiple="multiple" data-right="#multiselect_to_1" data-right-all="#right_All_1" data-right-selected="#right_Selected_1" data-left-all="#left_All_1" data-left-selected="#left_Selected_1">
		{% for x in othergroup%}
		<option value="{{x.id}}">{{x.name}}</option>
		{% endfor %}
		</select>
	</div>
	
	<div class="col-xs-2">
		<button type="button" id="right_All_1" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
		<button type="button" id="right_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
		<button type="button" id="left_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
		<button type="button" id="left_All_1" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
	</div>
	
	<div class="col-xs-5">
		<select name="group" id="multiselect_to_1" class="form-control" size="8" multiple="multiple">
		{% for x in ingroup%}
			<option value="{{x.id}}">{{x.name}}</option>
			{% endfor %}
		</select>
	</div>
</div>

</div>
</div><!-- /.box-body -->
</div>


<div class="hr-line-dashed"></div>

<div  style="width: 80%;margin-left: 25px;">
<div >
<div class="box-header">
  <h3 class="box-title">组权限列表</h3>
</div><!-- /.box-header -->
<div class="box-body no-padding">
 <div class="row">
	<div class="col-xs-5">
		<select name="from" id="keepRenderingSort" class="form-control" size="8" multiple="multiple">
			{% for otherpe in otherpermission %}
			<option value="{{otherpe.id}}">{{otherpe.name}}</option>
			{% endfor %}
		</select>
	</div>
	
	<div class="col-xs-2">
		<button type="button" id="keepRenderingSort_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
		<button type="button" id="keepRenderingSort_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
		<button type="button" id="keepRenderingSort_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
		<button type="button" id="keepRenderingSort_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
	</div>
	
	<div class="col-xs-5">
		<select name="ownpe" id="keepRenderingSort_to" class="form-control" size="8" multiple="multiple">
		{% for ownpe in inpermission %}
			<option value="{{ownpe.id}}">{{ownpe.name}}</option>
			{% endfor %}
		</select>
	</div>
</div>
</div><!-- /.box-body -->
</div>
</div>

<div class="hr-line-dashed"></div>

<div style="float:right;margin-right: 115px;">
	<button class="btn btn-block btn-success" name="submit" id="submit">确认修改</button>
</div>
<div style="clear:both"></div>
</form>
</div>

<script type="text/javascript" src="/static/js/jquery.min.js"></script>
	<script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="/static/js/prettify.min.js"></script>
	<script type="text/javascript" src="/static/js/multiselect.min.js"></script>  
	<!-- Select2 -->
<script src="/static/plugins/select2/select2.full.min.js"></script>
<!-- InputMask -->
<script src="/static/plugins/input-mask/jquery.inputmask.js"></script>
<script src="/static/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="/static/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<!-- date-range-picker -->
  
	<script type="text/javascript">
	$(document).ready(function() {
		$('.multiselect').multiselect();
		// make code pretty
		window.prettyPrint && prettyPrint();
		
		if ( window.location.hash ) {
			scrollTo(window.location.hash);
		}
		
		$('.nav').on('click', 'a', function(e) {
			scrollTo($(this).attr('href'));
		});		
		$('#multiselect').multiselect();
		$('.multiselect').multiselect();
		$('.js-multiselect').multiselect({
			right: '#js_multiselect_to_1',
			rightAll: '#js_right_All_1',
			rightSelected: '#js_right_Selected_1',
			leftSelected: '#js_left_Selected_1',
			leftAll: '#js_left_All_1'
		});

		$('#keepRenderingSort').multiselect({
			keepRenderingSort: true
		});

		$('#undo_redo').multiselect();
	});
	
	function scrollTo( id ) {
		if ( $(id).length ) {
			$('html,body').animate({scrollTop: $(id).offset().top - 40},'slow');
		}
	}
	</script>
	
	



{% endblock %}